import React, { Component } from "react";
import { Form, Input, Button, Row, Col } from "antd";
import Content from "../../components/Content/Content";
const { Item } = Form;
const { TextArea } = Input;
class AcquisitionCreateForm extends Component {
  constructor(props) {
    super(props);
  }

  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="采集样品编号">{getFieldDecorator("id")(<Input />)}</Item>
        <Item label="单菌落编号">
          {getFieldDecorator("comefrom")(<Input />)}
        </Item>
        <Item label="单菌落特征">
          {getFieldDecorator("content")(<Input />)}
        </Item>
        <Item label="单菌落数据">
          {getFieldDecorator("data")(<TextArea rows={4} />)}
        </Item>
        <Item wrapperCol={{ span: 12, offset: 4 }}>
          <Row guuter={16}>
            <Col span={6}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
            <Col span={6}>
              <Button type="">取消</Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedAcquisitionCreateForm = Form.create({
  name: "create acquisition"
})(AcquisitionCreateForm);

class SingleColony extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedAcquisitionCreateForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default SingleColony;
